.breadcrumb {
  @media only screen and (min-width: 768px) {
    margin-top: -14px !important;
  }
}

.titleAndActions {
  display: flex;
  align-items: center;
  margin-top: 14px;

  margin-bottom: 14px;
  @media only screen and (min-width: 768px) {
    margin-bottom: 18px;
  }

  .title {
    @title-height: 40px;

    flex-grow: 1;
    line-height: @title-height;

    :global(.header) {
      display: inline;
      font-weight: normal;
      color: #3a3a3a;
      margin: 0 !important;
      height: @title-height;
      vertical-align: middle;
    }

    .replyCount {
      &::before {
        margin: 0 10px;
        content: "·";
        white-space: pre;
      }

      color: #777;
      height: @title-height;
      display: inline;
      vertical-align: middle;
    }

    * {
      line-height: 1 !important;
    }
  }

  .actions {
    flex-shrink: 0;

    > :last-child {
      margin-right: 0 !important;
    }
  }
}

@emoji-font-size: 19px;

.items {
  // item or loadMore
  > div {
    margin-bottom: 21px;
    @media only screen and (min-width: 768px) {
      margin-bottom: 34px;
    }
  }
}

@desktop-avatar-size: 40px;
@desktop-avatar-margin: 19px;

@border-color: rgb(225, 225, 225);
@border-color-current-user: #bcd9f5;
@border-color-focused-editor: @border-color-current-user;

@line-color: #e1e1e1;
@vertical-line-height: 17px;
@vertical-line-width: 2px;
@vertical-line-color: @line-color;

@header-one-row-height: 42px;

.item {
  display: flex;
  position: relative;

  @header-background: #f7f7f7;
  @header-background-current-user: #f1f8ff;
  @reaction-item-background-hover: #f9fdff;
  @content-margin: 14px;

  > .avatar {
    width: @desktop-avatar-size;
    height: @desktop-avatar-size;
    margin-right: @desktop-avatar-margin;
    flex: 0 0 auto;

    img {
      border-radius: 4px;
    }
  }

  @header-line-height: 24px;

  @triangle-size: 10px;
  @triangle-height: @header-line-height;

  @header-padding-left-right: 14px;
  @header-padding-top-bottom: 7px;
  @header-border-radius: 4px;

  @editor-min-height-reply: 130px;
  @editor-min-height-discussion: 260px;
  @editor-max-height-reply: 260px;
  @editor-max-height-discussion: 390px;

  .bubble {
    width: 100%;
    @media only screen and (min-width: 768px) {
      width: calc(100% - @desktop-avatar-size - @desktop-avatar-margin);
    }
    flex: 0 0 auto;
    position: relative;

    > :global(.segment) {
      border-color: @border-color !important;
    }

    .header {
      display: flex;
      place-content: center;
      flex-direction: column;
      min-height: @header-one-row-height;
      padding: @header-padding-top-bottom @header-padding-left-right;
      font-weight: normal !important;;
      background-color: @header-background !important;
      border-color: @border-color !important;
      border-top-left-radius: @header-border-radius !important;
      border-top-right-radius: @header-border-radius !important;
    }

    .headerContents {
      display: flex;
      color: #777;
      line-height: @header-line-height;

      .left {
        flex-grow: 1;
        display: flex;
        flex-wrap: wrap;
        align-items: center;

        .avatar {
          width: 20px;
          height: 20px;
          margin-right: 8px;
        }

        .username::after {
          content: " ";
          white-space: pre;
        }

        .commentedOn {
          display: flex;
          white-space: pre;

          .edited {
            display: inline-flex;
            align-items: center;

            &::before {
              content: "•";
              margin: 0 3px;
              display: block;
              transform: scale(0.7);
            }
          }
        }

        .labelDivider {
          flex-grow: 1;
        }

        .label {
          background: none !important;
          font-weight: normal;
          color: #666;
          margin: 0 !important;
          font-size: 0.8em;
        }
      }

      .right {
        display: flex;
        flex-shrink: 0;
        align-items: center;

        &:not(:empty) {
          margin-left: 12px;
        }

        .actionIcon {
          margin-right: 9px;

          &:last-child {
            margin-right: 0px;
          }

          > :global(.icon) {
            display: block;
            cursor: pointer;
            font-size: 19px;
            opacity: 0.4;
            margin-right: 0 !important;
          }

          &:hover, &.active {
            > :global(.icon) {
              opacity: 0.9;
            }
          }
        }

        .delete {
          color: #db2828;
        }
      }
    }

    .triangle {
      position: relative;
      height: @triangle-height;

      &::before {
        content: "";
        position: absolute;
        display: block;

        top: calc((@triangle-height - @triangle-size) / 2);
        left: -20px;
        width: @triangle-size;
        height: @triangle-size;

        border-left: 1px solid @border-color;
        border-bottom: 1px solid @border-color;
        transform: rotate(45deg);
        background-color: @header-background;
      }
    }

    .content {
      overflow: auto;
    }

    .emojiList {
      padding: 0 !important;
      overflow: hidden;

      .emojiListWrapper {
        margin-bottom: -1px;
        display: flex;
        flex-wrap: wrap;

        .emojiItem {
          display: flex;
          align-items: center;
          padding: 7px 14px;
          border-right: 1px solid @border-color;
          border-bottom: 1px solid @border-color;
          cursor: pointer;

          &.disabled {
            cursor: default;

            .link {
              color: #777;
              cursor: default;
            }
          }

          &:not(.disabled):not(.selected):hover {
            background-color: @reaction-item-background-hover;
          }

          &.selected {
            background-color: @header-background-current-user;
          }

          .emoji {
            font-size: @emoji-font-size;
            display: flex;
            align-items: center;
            margin-right: 10px;
          }
        }
      }
    }

    > :last-child {
      margin-bottom: 0 !important;
    }

    // GitHub style pending dimmer
    //
    // &.pending::after {
    //   @media only screen and (min-width: 768px) {
    //     left: -@triangle-size;
    //     width: calc(100% + @triangle-size + 1px);
    //   }
    //
    //   content: "";
    //   display: block;
    //   position: absolute;
    //   top: 0;
    //   left: 0;
    //   width: 100%;
    //   height: 100%;
    //   background-color: rgba(255, 255, 255, 0.5);
    // }
  }

  &.raw .bubble {
    width: 100%;
  }

  // Limit the height of markdown contents
  &.discussion .content {
    max-height: 20000px;
  }

  &:not(.discussion) .content {
    max-height: 1600px;
  }

  &.currentUser {
    // &:not(.edit.discussion)
    &:not(.edit), &:not(.discussion) {
      > .bubble {
        > .header, .triangle::before {
          border-color: @border-color-current-user !important;
          background-color: @header-background-current-user !important;
        }

        > :global(.segment) {
          border-left-color: @border-color-current-user !important;
          border-right-color: @border-color-current-user !important;

          &:last-child {
            border-bottom-color: @border-color-current-user !important;
          }
        }

        > .mainSegment .editor {
          border-left-color: @border-color-current-user !important;
          border-right-color: @border-color-current-user !important;
        }
      }
    }
  }

  &.edit > .bubble {
    > .header {
      padding-bottom: 0;
      height: auto;

      > .triangle + * {
        margin-top: -@header-line-height
      }

      > .title {
        position: relative;
        width: calc(100% + @header-padding-left-right * 2) !important;
        height: @header-one-row-height;
        top: -@header-padding-top-bottom;
        left: -@header-padding-left-right;
        border-top-left-radius: @header-border-radius !important;
        border-top-right-radius: @header-border-radius !important;
        overflow: hidden;
        border-bottom: 1px solid @border-color;

        > input {
          border: none !important;
          border-radius: 0;
        }
      }

      > .headerContents {
        > :global(.menu) {
          margin-bottom: -1px;
          min-height: 0;
          height: @header-one-row-height;
          margin-top: 0;

          > :global(.item) {
            padding-top: 0px;
            padding-bottom: 0px;
            transition: none;

            &:global(.active) {
              font-weight: normal;
            }
          }
        }
      }
    }

    > .mainSegment {
      padding: 0;

      .editor {
        border-top: none;
        border-left-color: @border-color;
        border-right-color: @border-color;
        border-radius: 0;
        resize: none;
        margin-left: -1px;
        width: calc(100% + 2px);
      }

      .preview {
        padding: 11px 14px;
      }

      > .actions {
        margin-top: 10px;
        margin-bottom: 10px;
        display: flex;
        place-content: flex-end;

        :global(.button) {
          margin: 0 10px 0 0;
        }
      }
    }
  }

  // border colors
  &.edit {
    > .bubble > .header {
      border-bottom-color: @border-color !important;

      > .headerContents > :global(.menu) {
        border-bottom-color: @border-color !important;

        > :global(.item.active) {
          border-color: @border-color !important;
        }
      }
    }

    > .bubble > .mainSegment {
      .editor {
        border-bottom-color: @border-color !important;
      }

      .preview {
        border-bottom: 1px solid @border-color;
      }
    }

    &.raw > .bubble > .mainSegment {
      border-bottom: none;
    }

    // highlight focused editor
    &.edit:not(.discussion) > .bubble.editorFocused {
      > .header {
        border-bottom-color: @border-color-focused-editor !important;

        > .headerContents > :global(.menu) {
          border-bottom-color: @border-color-focused-editor !important;

          > :global(.item):global(.active) {
            border-color: @border-color-focused-editor !important;
          }
        }
      }

      > .mainSegment .editor {
        border-color: @border-color-focused-editor !important;
      }
    }
  }

  &:not(.new), .items.mobile & {
    // &:not(.edit.discussion)
    &:not(.edit), &:not(.discussion) {
      &:not(:first-child)::before, &:not(:last-child)::after {
        content: " ";
        display: block;
        width: @vertical-line-width;
        height: @vertical-line-height;
        position: absolute;
        left: calc(@desktop-avatar-size + @desktop-avatar-margin + @content-margin);
        @media only screen and (max-width: 767px) {
          left: calc(@content-margin);
        }
        background-color: @vertical-line-color;
      }

      &:not(:first-child)::before {
        top: -@vertical-line-height;
      }

      &:not(:last-child)::after {
        bottom: -@vertical-line-height;
      }
    }
  }

  @media only screen and (min-width: 768px) {
    &.edit.new:not(.discussion) {
      margin-top: -@vertical-line-height;
    }
  }

  &.edit.discussion {
    .avatar {
      position: relative !important;
      top: calc(@header-one-row-height);
    }

    .triangle::before {
      top: calc(@header-one-row-height + @header-padding-top-bottom);
    }
  }

  &.edit:not(.discussion) {
    .editor {
      min-height: @editor-min-height-reply;
      max-height: @editor-max-height-reply;
    }

    .preview {
      min-height: @editor-min-height-reply;
    }
  }

  &.edit.discussion {
    .editor {
      min-height: @editor-min-height-discussion;
      max-height: @editor-max-height-discussion;
    }

    .preview {
      min-height: @editor-min-height-discussion;
    }
  }

  &:last-child {
    margin-bottom: 0;
  }
}

.loadMore {
  @margin: @desktop-avatar-size + @desktop-avatar-margin;
  @media only screen and (min-width: 768px) {
    margin-left: @margin;
    width: calc(100% - @margin);
  }
  text-align: center;
  background-repeat: repeat-x;
  background-position: 0;
  background-size: 15px;

  > div {
    box-sizing: content-box;
    width: 140px;
    display: inline-block;
    border-radius: 4px;
    border: 1px solid @border-color;
    color: #555;
    padding: 7px 14px;
    line-height: 24px;
    background-color: #fff;

    > a {
      display: block;
      font-weight: bolder;
    }
  }
}

.emojiPicker {
  @margin: 8px;

  margin: @margin;
  user-select: none;

  .emojiGrid {
    @margin-rows: 4px;
    @emoji-size: 28px;

    .emojiRow {
      display: flex;
      margin: @margin-rows 0;

      &:first-child {
        margin-top: 0;
      }

      &:last-child {
        margin-bottom: 0;
      }

      .emoji {
        @margin-columns: 2px;

        font-size: @emoji-font-size;
        margin: 0 @margin-columns;
        width: @emoji-size;
        height: @emoji-size;
        display: flex;
        align-items: center;
        place-content: center;
        padding: 10px;
        border-radius: 4px;
        cursor: pointer;

        &:first-child {
          margin-left: 0;
        }

        &:last-child {
          margin-right: 0;
        }

        &:hover {
          background: rgba(0, 0, 0, 0.05);
        }

        &.selected {
          background: rgba(0, 0, 0, 0.1);
        }
      }
    }
  }

  .customEmoji {
    margin: -@margin;
    margin-top: @margin;

    > input {
      border-radius: 0;
      border: none;
      border-top: 1px solid rgba(34, 36, 38, 0.15) !important;
      padding: @margin;
      padding-left: calc(@margin + 4px);
    }
  }
}

.emojiPickerPopup {
  padding: 0 !important;
}

.dividerBeforeAddReply {
  height: 2px;
  margin-top: -@vertical-line-height;
  background-color: @line-color;
}

.emoji > img {
  height: 1em;
}
